{extend name="public/container"}
{block name="head_top"}
<script src="{__PLUG_PATH__}city.js"></script>
<style>
    .layui-btn-xs{margin-left: 0px !important;}
    legend{
        width: auto;
        border: none;
        font-weight: 700 !important;
    }
    .site-demo-button{
        padding-bottom: 20px;
        padding-left: 10px;
    }
    .layui-form-label{
        width: auto;
    }
    .layui-input-block input{
        width: 50%;
        height: 34px;
    }
    .layui-form-item{
        margin-bottom: 0;
    }
    .layui-input-block .time-w{
        width: 200px;
    }
    .layui-table-body{overflow-x: hidden;}
    .layui-btn-group button i{
        line-height: 30px;
        margin-right: 3px;
        vertical-align: bottom;
    }
    .back-f8{
        background-color: #F8F8F8;
    }
    .layui-input-block button{
        border: 1px solid #e5e5e5;
    }
    .avatar{width: 50px;height: 50px;}
    .layui-table-body{
        overflow-x: unset;
    }
</style>
{/block}
{block name="content"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>会员搜索</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content" style="display: block;">
<!--                <div class="alert alert-success alert-dismissable">-->
<!--                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>-->
<!--                    目前拥有{$count_user}个会员-->
<!--                </div>-->
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名编号：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="nickname" lay-verify="nickname" style="width: 100%" autocomplete="off" placeholder="请输入姓名、编号、手机号" class="layui-input">
                            </div>
                        </div>
                     
                        <div class="layui-inline">
                            <label class="layui-form-label">状　　态：</label>
                            <div class="layui-input-inline">
                                <select name="status" lay-verify="status">
                                    <option value="">全部</option>
                                    <option value="1">正常</option>
                                    <option value="0">锁定</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">性　　别：</label>
                            <div class="layui-input-inline">
                                <select name="sex" lay-verify="sex">
                                    <option value="">全部</option>
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                    <option value="0">保密</option>
                                </select>
                            </div>
                        </div>
                    
                     
                
                        <div class="layui-inline">
                            <label class="layui-form-label">国　　家：</label>
                            <div class="layui-input-inline">
                                <select name="country" lay-verify="country" lay-filter='country'>
                                    <option value=""  selected="selected">请选择国家</option>
                                    <option value="domestic">中国</option>
                                    <option value="abroad">外国</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline" id="province-div">
                            <label class="layui-form-label">省　　份：</label>
                            <div class="layui-input-inline">
                                <select name="province" lay-verify="province" lay-filter='province' id="province">
                                    <option value="" id="province-top">请选择省</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline" id="city-div">
                            <label class="layui-form-label">市　　区：</label>
                            <div class="layui-input-inline">
                                <select name="city" lay-verify="city"  lay-filter='city' id="city">
                                    <option value="" id="city-top">请选择市</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="search" >
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索</button>
                        </label>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-content">
                <div class="table-responsive">
                    <div class="layui-btn-group conrelTable">
                    </div>
                    <table class="layui-hide" id="List" lay-filter="List"></table>
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
              
                          <button class="layui-btn layui-btn-danger" lay-event='delAll'><i
                            class="layui-icon layui-icon-delete"></i>全部删除
                           </button>
                        </div>
                      </script>
                   
                      <script type="text/html" id="thumb">
                        <img style="cursor: pointer;width:50px;height:50px;border-radius:50%" class="avatar" lay-event='open_image' src="{{d.avatar_url}}">
                     </script>

                     <script type="text/html" id="status">

                        <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="正常|禁止" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
                    </script>

                    <script type="text/html" id="sex">
                        {{# if(d.sex==1){ }}
                            <span>男</span>
                        {{# }else if(d.sex ==2){ }}
                            <span>男</span>
                        {{# }else{ }}
                            <span>保密</span>
                        {{# } }}
                    </script>

                    <script type="text/html" id="barDemo">
                        <button type="button" class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-dange" lay-event="delete"><i class="layui-icon layui-icon-edit"></i>删除</button>
                        <!-- <button type="button" class="layui-btn layui-btn-xs" onclick="dropdown(this)">操作 <span class="caret"></span></button>
                        <ul class="layui-nav-child layui-anim layui-anim-upbit">
                            <li>
                                <a href="javascript:void(0);" lay-event="see1">
                                    <i class="layui-icon layui-icon-edit"></i> 操作1</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" lay-event="see2">
                                    <i class="layui-icon layui-icon-edit"></i> 操作2</a>
                            </li>
                        </ul> -->
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{__ADMIN_PATH__}js/layuiList.js"></script>
<script src="{__FRAME_PATH__}js/content.min.js?v=1.0.0"></script>
{/block}
{block name="script"}
<script>
    $(function () {
    $('#province-div').hide();
    $('#city-div').hide();
    layList.select('country',function (odj,value,name) {
        var html = '';
        $.each(city,function (index,item) {
            html += '<option value="'+item.label+'">'+item.label+'</option>';
        })
        if(odj.value == 'domestic'){
            $('#province-div').show();
            $('#city-div').show();
            $('#province-top').siblings().remove();
            $('#province-top').after(html);
            $('#province').val('');
            layList.form.render('select');
        }else{
            $('#province-div').hide();
            $('#city-div').hide();
        }
        $('#province').val('');
        $('#city').val('');
    });
    
    layList.select('province',function (odj,value,name) {
        var html = '';
        $.each(city,function (index,item) {
            if(item.label == odj.value){
                $.each(item.children,function (indexe,iteme) {
                    html += '<option value="'+iteme.label+'">'+iteme.label+'</option>';
                })
                $('#city').val('');
                $('#city-top').siblings().remove();
                $('#city-top').after(html);
                layList.form.render('select');
            }
        })
    });
        layList.form.render();
        layList.tableList('List',"{:Url('get_user_list')}",function () {
            return [
            {type:'checkbox'},
            {field: 'id', title: '编号',event:'uid',align:'center'},
            {field: 'avatar_url', title: '头像',templet: '#thumb',align:'center'},
            {field: 'nickname', title: '姓名',templet:'#nickname',align:'center'},
            {field: 'mobile', title: '手机号',align:'center',edit:"text"},
            {field: 'sex', title: '性别',align:'center',templet: '#sex'},
            { field: 'status', title: '状态', align: "center", templet: '#status' },
            {field: 'operate', title: '操作', width: '10%', align: 'center', toolbar: '#barDemo'}
            ]
        })
        //下拉框       
        $(document).click(function (e) {
            $('.layui-nav-child').hide();
        })
        //查询
        layList.search('search', function (where) {
            layList.reload(where, true);
        });
        //监听并执行排序
        layList.sort(['id', 'sort'], true);
        //快速编辑
        layList.edit(function (obj) {
            var id = obj.data.id, value = obj.value;
            action.set_value(obj.field, id, value);
        });
        layList.form.on('switch(status)', function (obj) {
            action.set_value(this.name, this.value, obj.elem.checked ? 1 : 0);
        });
  
        //头工具栏事件
        layList.table.on('toolbar(List)', function (obj) {
            var checkStatus = layList.table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'delAll':
                    var data = checkStatus.data;
                    if (data.length > 0) {
                        var ids = [];
                        for (let index = 0; index < data.length; index++) {
                            ids.push(data[index].id)
                        }
                        action.del(ids);
                    } else {
                        layList.msg('没有选择数据!');
                        return;
                    }

                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            };
        });
        //点击事件绑定
        layList.tool(function (event, data, obj) {
            switch (event) {
                case 'delete':
                    action.del(data.id, obj);
                    break;
                case 'edit':
                    layList.createModalFrame('编辑', 'form/id/' + data.id, 1200, 700);
                    break;
                case 'open_image':
                    layList.openImage(data.avatar_url);
                    break;
            }
        })

        //自定义方法
        var action = {
            set_value: function (field, id, value) {
                layList.basePost('set_value', { field: field, id: id, value: value }, function (res) {
                    layList.msg(res.msg);
                },function(res){
                    layList.layer.alert(res.msg,{icon:2,title:false});
                });
            },

            del: function (id, obj) {
                layer.confirm('确认删除么？', { icon: 3, title: '警告' }, function () {
                    layList.basePost('delete', { id, id }, function (res) {
                        if (res.code == 200) {
                            layList.msg(res.msg, function () {
                                layer.closeAll();
                                $(obj.tr.selector).remove();
                            })
                        }

                    });
                })
            }
        }

    })



</script>
{/block}
